<template>
  <div class="date">
    <div class="calendar" v-if="tags.length === 3">
      <p class="yearMonth">{{ tags[0] }}.{{ tags[1] }}</p>
      <p class="day">{{ tags[2] }}</p>
    </div>
    <div class="dateTime" v-else-if="tags.length === 2">
      <p class="date">{{ tags[0] }}</p>
      <p class="time">{{ tags[1] }}</p>
    </div>
    <!-- <span v-else>数据不匹配该显示类型</span> -->
    <!-- <span v-for="(item, index) in tags" :key="index">
      <Tag type="border">{{item}}</Tag>
    </span> -->
  </div>
</template>
<script>
export default {
  name: "dtDate",
  props: ["data"],
  mounted() {
    let selfData = this.data.split(" ");
    let newArr = [];
    if (selfData.length === 1) {
      selfData.forEach(item => {
        newArr = item.split("-");
      });
      this.tags = newArr;
    } else {
      this.tags = selfData;
    }
  },
  data() {
    return {
      tags: []
    };
  }
};
</script>
<style lang="less">
.date {
  .calendar {
    width: 54px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    margin: 5px 0;
    display: inline-block;
    p.yearMonth {
      background: #d33235;
      color: #ffffffd4;
      font-weight: bold;
      font-size: 10px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      padding: 2px 0;
    }
    p.day {
      font-size: 20px;
      font-weight: bold;
      position: relative;
      &:before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        bottom: 0;
        right: 0;
        // background: #fff;
        background: linear-gradient(
          320deg,
          #f3f3f3 45%,
          #c3c3c3 50%,
          #d3d4d4 56%,
          white 80%
        );
        box-shadow: -1px 1px 1px rgb(208, 208, 208);
        transition-duration: 0.3s;
        transition-property: width, height;
      }
    }
  }
  .dateTime {
    width: 150px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    margin: 5px 0;
    display: inline-block;
    p.date {
      background: #0e9ab1;
      color: #ffffffd4;
      font-weight: bold;
      font-size: 14px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      padding: 2px 0;
    }
    p.time {
      font-size: 16px;
      font-weight: bold;
      position: relative;
      // &:before {
      //   position: absolute;
      //   content: '';
      //   height: 8px;
      //   width: 8px;
      //   bottom: 0;
      //   right: 0;
      //   // background: #fff;
      //   background: linear-gradient(320deg, #f3f3f3 45%, #c3c3c3 50%, #d3d4d4 56%, white 80%);
      //   box-shadow: -1px 1px 1px rgb(208, 208, 208);
      //   transition-duration: 0.3s;
      //   transition-property: width,height;
      // }
    }
  }
  span {
    display: inline-block;
    .ivu-tag {
      // width: 100px;
      // height: 100px;
      position: relative;
      background: #f5f7f9 !important;
      border: none;
      &:before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        bottom: 0;
        right: 0;
        // background: #fff;
        background: linear-gradient(
          315deg,
          white 45%,
          #f5f7f9 50%,
          #dbddde 56%,
          white 80%
        );
        box-shadow: -1px 1px 1px rgb(208, 208, 208);
        transition-duration: 0.3s;
        transition-property: width, height;
      }
    }
  }
}
</style>
